<template>
    <div>
        <div>
        <button>{{this.$store.state.city}}</button>
        </div>
        <button @click="changeCity(item)" v-for="item of hots" :key="item.id">{{item}}</button>
    </div>
</template>

<script>

import { reactive, toRefs } from '@vue/reactivity';
export default {
   setup(){
       const state =reactive({
        hots:["长沙","厦门","上海","西安"],
        changeCity(val){
            console.log(val);
            this.$store.commit("changeCity",val)
            this.$router.back()
        }
       })
       const refsState =toRefs(state)
       return{
           ...refsState
       }
   }

};
</script>

<style  scoped>

</style>